<template>
	<a-card class="info-card">
		<div class="line1">
			<img class="user-head" :src="HeadIcon" />
			<div class="user-info-txt">
				<span class="title">您好！{{uinfo.userName}}</span>
				<span class="dept" v-if="uinfo.departmentName">{{ uinfo.departmentName }}</span>
				<span class="last-login-time" v-if="uinfo.os_l_time">上次登录：{{uinfo.os_l_time}}</span>
			</div>
			<a-button type="primary" class="logout" @click="toLogout">
				<template #icon>
					<LogoutOutlined />
				</template>
				退出登录
			</a-button>
		</div>
		<div class="line2">
			<span class="fast-enter">快捷入口</span>
			<!-- <a-button class="manage-btn" size="small" ghost type="primary">后台管理<RightOutlined /></a-button> -->
		</div>
		<div class="btn-items" v-if="!isnormaluser">
			<div class="btn-item">
				 <a href="javascript:void(0);" @click="toAddRepari">
					<img :src="LudanIcon" />
					<p>我要录单</p>
					<span>在线录单 快速成单</span>
				 </a>
			</div>
			<div class="btn-item">
				<a href="javascript:void(0);" @click="toBillSearch">
					<img :src="SearchIcon" />
					<p>工单查询</p>
					<span>快速检索 精准定位</span>
				</a>
			</div>
			<div class="btn-item">
				<a href="javascript:void(0);" @click="toHome">
					<img :src="BaoxiuIcon" />
					<p>报修门户</p>
					<span>工单汇总 高效管理</span>
				</a>
			</div>
			<div class="btn-item">
				<a href="javascript:void(0);" @click="toBigPage">
					<img :src="TongjiIcon" />
					<p>统计大屏</p>
					<span>数据分析 统计管理</span>
				</a>
			</div>
		</div>
		<div class="btn-items isnormaluser" v-if="isnormaluser">
			<div class="btn-item">
				 <a href="javascript:void(0);" @click="toAddRepari2">
					<img :src="LudanIcon" />
					<p>我要报修</p>
					<span>在线报修 快速成单</span>
				 </a>
			</div>
			<div class="btn-item">
				<a href="javascript:void(0);"  @click="toHome">
					<img :src="BaoxiuIcon" />
					<p>报修门户</p>
					<span>报修门户 数据透明</span>
				</a>
			</div>
		</div>
	</a-card>
	<AddBill v-if="showAddBill" @closeModal="closeModal"/>
</template>
<script setup>
	import { ref, onMounted} from 'vue';
	import { RightOutlined, LogoutOutlined } from '@ant-design/icons-vue';
	import HeadIcon from '@/assets/images/common/head.png';
	import LudanIcon from '@/assets/images/repair/ludan.png';
	import BaoxiuIcon from '@/assets/images/repair/baoxiu.png';
	import SearchIcon from '@/assets/images/repair/search.png';
	import TongjiIcon from '@/assets/images/repair/tongji.png';
	import {  KEY_CONST } from '@/constants/system-const';
    import AddBill from '@/views/student/add-bill.vue';

	import tool from '@/utils/tool';
	import { useUserStore } from '@/store/modules/user';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	const showAddBill = ref(false);

	const toAddRepari = function(){
		router.push({
			path: '/work/repairadd'
		});
	}

	const props = defineProps({
		uinfo: {
			type: Object,
			default: {},
		},
		isnormaluser:{
			type: Boolean,
			default: false,
		},
	});
	const toLogout = function(){
		useUserStore().logout();
		tool.removeLocalStorage(KEY_CONST.USER_TOKEN);
		router.replace({
			path: '/home'
		});
	};
	const toHome = function(){
		router.replace({
			path: '/home'
		});
	};
	const toBillSearch = function(){
		router.push({
			path: '/work/gdcx'
		});
	};
	//普通用户报修界面
	const toAddRepari2 = function(){
		showAddBill.value = true;
	};
	const closeModal = function(){
		showAddBill.value = false;
	};
	//跳转至统计大屏
	const  toBigPage = function(){
		tool.success('跳转至统计大屏界面！');
	};
</script>
<style lang="less" scoped>
	.info-card {
		height: 300px;
		.line1 {
			.user-head {
				width: 56px;
				height: 56px;
				border-radius: 50%;
				vertical-align: super;
			}
			.user-info-txt {
				display: inline-block;
				margin-left: 8px;
				.title {
					color: #1d2129;
					font-size: 16px;
					font-weight: 700;
					display: block;
				}
				.dept {
					display: inline-block;
					margin: 4px 0;
					font-size: 12px;
					color: #165dff;
					letter-spacing: 2px;
					font-weight: 600;
					padding: 3px 8px;
					background-color: #e8f3ff;
					border-radius: 2px;
				}
				.last-login-time {
					display: block;
					font-size: 12px;
					color: #86909c;
				}
			}
			.logout {
				float: right;
				margin-top: 24px;
			}
		}
		.line2 {
			margin-top: 24px;
			.fast-enter {
				font-size: 16px;
				color: #1d2129;
				font-weight: 700;
			}
			.manage-btn {
				float: right;
			}
		}
		.btn-items {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: right;
			margin-top: 16px;
			.btn-item {
				text-align: left;
				width: 24%;
				cursor: pointer;
				img {
					width: 40px;
					height: 40px;
				}
				p {
					margin-top: 8px;
					margin-bottom: 0;
				}
				span {
					font-size: 12px;
					color: #86909c;
				}
			}
			&.isnormaluser{
				.btn-item{
					width: 45%;
				}
			}
		}
	}
</style>